<div class="container">
    <users-nav></users-nav>

    <group-name group="group"></group-name>

    <div class="row">
        <div class="col-lg-4">
            <ul class="nav nav-pills">
                <li role="presentation"><a href="groups/{{group.id}}">Members</a></li>
                <li role="presentation" class="active"><a href="groups/{{group.id}}/data_sources">Data Sources</a></li>
            </ul>
        </div>
        <div class="col-lg-8">
            <ui-select ng-model="newDataSource.selected" on-select="addDataSource($item)">
                <ui-select-match placeholder="Add Data Source"></ui-select-match>
                <ui-select-choices repeat="dataSource in foundDataSources | filter:$select.search"
                                   refresh="findDataSource($select.search)"
                                   refresh-delay="0">
                    <div>
                        {{dataSource.name}}
                    </div>
                </ui-select-choices>
            </ui-select>
        </div>
    </div>
    <div class="row voffset1">
        <div class="col-lg-12">
            <table class="table table-condensed table-hover">
                <thead>
                </thead>
                <tbody>
                    <tr ng-repeat="dataSource in dataSources">
                        <td> {{dataSource.name}}</td>
                        <td width="180px">
                            <div class="btn-group" dropdown>
                                <button type="button" class="btn btn-sm btn-default dropdown-toggle" dropdown-toggle ng-if="dataSource.view_only">
                                    View Only <span class="caret"></span>
                                </button>

                                <button type="button" class="btn btn-sm btn-success dropdown-toggle" dropdown-toggle ng-if="!dataSource.view_only">
                                    Full Access <span class="caret"></span>
                                </button>

                                <ul class="dropdown-menu" role="menu">
                                    <li><a ng-click="changePermission(dataSource, false)"><small ng-if="!dataSource.view_only"><span class="glyphicon glyphicon-ok"/></small> Full Access<br/></a></li>
                                    <li><a ng-click="changePermission(dataSource, true)"><small ng-if="dataSource.view_only"><span class="glyphicon glyphicon-ok"/></small> View Only</a></li>
                                </ul>
                            </div>

                            <button class="pull-right btn btn-sm btn-danger" ng-click="removeDataSource(dataSource)">Remove</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
